<template>
  <p-modal
    title="M3查询"
    :body-style="{
      height: '510px',
    }"
    :row-key="(records, index) => index"
    :visible="visible"
    :mask-closable="false"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <div style="margin-bottom: 10px">
      <p-input
        v-model="M3name"
        placeholder="输入M3名称查询"
        style="width: 70%"
      />
      <p-button class="ml-10" type="primary" @click="searchM3">查询</p-button>
      <p-button class="ml-10" @click="resInput">重置</p-button>
    </div>
    <p-table
      row-key="(record, index) => index"
      :scroll="{ y: 350 }"
      :columns="columns"
      :pagination="pagination"
      :data-source="formatData"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChanges,
        type: 'radio',
      }"
      bordered
      @change="change"
    />
  </p-modal>
</template>

<script>
import { postLoadTableList } from '@/api/forecast.js';
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },

    reset: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: {
        asc: true,
        column: '',
        current: 1,
        name: '',
        node: '',
        pageSize: 10,
        salesOrganization: '',
        currStatus: '3',
        type: 'M3',
      },
      pagination: {
        pageSize: 10,
        current: 1,
        defaultPageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100'],
        showLessItems: true,
        total: 0,
        showSizeChanger: true,
        // showTotal: (total) => {
        //   return `总计${total}条`;
        // },
      },
      selM3name: {},
      M3name: '',
      selectedRowKeys: [],
      formatData: [],
      columns: [
        {
          align: 'center',
          title: '序号',
          width: 50,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: 'M3编号',
          dataIndex: 'serialNumber',
          ellipsis: true,
        },
        { align: 'center', title: 'M3名称', dataIndex: 'name', ellipsis: true },
      ],
    };
  },
  watch: {
    reset: {
      handler(val) {
        console.log('val: ', val);
        if (val) {
          this.selectedRowKeys = [];
        }
      },
    },
  },
  async created() {
    this.loadingList();
    this.selectedRowKeys = [];
  },
  methods: {
    change(pagination) {
      this.selectedRowKeys = [];
      this.data.current = pagination.current;
      this.data.pageSize = pagination.pageSize;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.loadingList();
    },
    onSelectChanges(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selM3name.name = selectedRows[0].name;
      this.selM3name.id = selectedRows[0].id;
    },
    async loadingList() {
      this.data.name = this.M3name;
      const res = await postLoadTableList(this.data);
      this.pagination.total = res.data?.data?.total || 0;
      this.formatData = res.data?.data?.records || [];
    },
    searchM3() {
      this.loadingList();
    },
    handleCancel() {
      this.$emit('update:visible', false);
    },
    handleCancell() {
      this.$emit('update:visible', false);
      this.$emit('M3searchName', this.selM3name);
    },
    handleOk() {
      this.handleCancell();
    },
    resInput() {
      this.M3name = '';
      this.loadingList();
    },
  },
};
</script>
<style  lang="less" scoped>
/deep/ .poros-modal {
  top: 50px;
}
</style>
